import React, { useState } from "react";
import { Button, Modal, Input } from "antd";
import "./Menu.css";

function Menu({ items }) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [databaseName, setDatabaseName] = useState("");

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = async () => {
    await window.electronAPI.createDatabase({
      name: databaseName,
    });
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="menu">
      <Button type="primary" onClick={showModal}>
        新建数据库
      </Button>
      <Modal
        title="新增数据库"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Input
          placeholder="请输入数据库名称"
          value={databaseName}
          onChange={(e) => setDatabaseName(e.target.value)}
        />
      </Modal>
    </div>
  );
}

export default Menu;
